<template>
  <div class="area-list">
    <v-title :title="title" />
    <arrow />
    <loading :show="loading" />
    <ul class="category" v-if="false">
      <li
        v-for="(item, index) in showCategoryList"
        :key="index"
        class="category-item"
        @click="$router.push(`/product/category-product-list/${item.id}`)"
      >
        <div class="image" v-if="item.image && item.image.thumbnail_path">
          <img v-lazy="item.image.thumbnail_path" />
        </div>
        <div class="name">{{ item.name }}</div>
      </li>
    </ul>
    <div
      class="category-more"
      @click="openAllCategory = !openAllCategory"
      v-if="categoryList.length > 8"
    >{{ !openAllCategory ? '收起分类' : '查看更多分类' }}</div>
    <!-- 后面的分类 -->
    <div class="keyword" @click="goSearch">
      <i class="cubeic-search"></i>
      <span>请输入关键字</span>
    </div>
    <div class="shop-x" v-if="shopCategory.length > 0">
      <div
        @click="selectCategory(item)"
        class="s"
        v-for="(item, index) in shopCategory"
        :key="index"
        :class="{'color': activeCategory === item.id}">{{ item.name }}</div>
    </div>
    <!-- product list -->
    <list :list="list" />
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
import List from '@/views/product/components/list'

export default {
  name: 'AreaList',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
    PullUp,
    List
  },
  computed: {
    showCategoryList() {
      return this.openAllCategory
        ? this.categoryList.filter((o, i) => i < 8)
        : this.categoryList
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      },
      title: '',
      categoryList: [],
      openAllCategory: true,
      shopCategory: [{ id: 0, name: '全部' }],
      activeCategory: 0
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Product.areaList({
          ...this.queryList,
          id: this.$route.params.id,
          category: this.activeCategory
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.title = data.title
          this.categoryList = data.category_list
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    getShopCategory() {
      api.Product.areaCategory().then(response => {
        let { data } = response
        data = base64.parse(data)
        // this.shopCategory = data.list
        data.list.forEach(x => {
          this.shopCategory.push(x)
        })
      })
    },
    selectCategory(item) {
      this.activeCategory = item.id
      this.list = []
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.getList()
    },
    goSearch() {
      this.$router.push('/search')
    }
  },
  created () {
    this.getList()
    const id = this.$route.params.id
    // console.log(id)
    if (+id === 11) {
      this.getShopCategory()
    }
  },
  activated () {
    // this.getList()
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">

.area-list
  padding-top 45px
  .keyword
    flex 1
    background white
    margin 12.5px 15px 12.5px 12.5px
    border-radius 15px
    line-height 35px
    text-align left
    padding 2.5px 10px
    display flex
    i
      margin-right 7px
      color #8e9f91
      font-size 16px
    span
      color #8e9f91
  .shop-x
    display flex
    flex-wrap wrap
    padding 10px
    .s
      background white
      height 30px
      line-height 30px
      margin-right 10px
      padding 0 10px
      border-radius 5px
      &.color
        background red
        color white
        font-weight 700
  .category
    margin 10px
    display flex
    flex-wrap wrap
    justify-content start
    .category-item
      padding 10px
      border-radius 10px
      background white
      width calc(25% - 10px)
      box-sizing border-box
      margin 5px
      .image
        padding 2.5px
      .name
        font-weight 700
        font-size 14px
        line-height 1.3em
  .category-more
    background $nav
    height 35px
    line-height 35px
    margin 10px
    border-radius 10px
</style>
